<template>
  <div id="app">
    <div class="container">
      <div class="close"><span class="iconfont iconicon-test"></span></div>
      <div class="logo"><span class="iconfont iconnew"></span></div>
      <div class="inputs">
        <!-- :value="username" @currentInput="handleInput" -->
        <hminput
          v-model.trim="user.username"
          placeholder="请输入用户名"
          :rule="/^1[35789]\d{9}$/"
        ></hminput>
        <hminput
          v-model.trim="user.password"
          placeholder="请输入用密码"
          :rule="/^.{3,16}$/"
        ></hminput>
      </div>
      <p class="tips">
        没有账号？
        <a href="#/register" class="">去注册</a>
      </p>
      <hmbutton type="success" @click="login">登录</hmbutton>
    </div>
  </div>
</template>

<script>
import hmbutton from "@/components/hmbutton.vue";
import hminput from "../components/hminput.vue";
import { useraxios } from "../apis/user.js";
export default {
  components: {
    hmbutton,
    hminput,
  },
  data() {
    return {
      user: {
        // username: "13333222555",
        username: "13000999888",
        password: "123456",
      },
    };
  },
  methods: {
    login(e) {
      // console.log(this.user.username);
      // console.log(this.user);
      // console.log("子组件点击了", e);
      if (
        /^1[35789]\d{9}$/.test(this.user.username) &&
        /^.{3,16}$/.test(this.user.password)
      ) {
        // console.log(this.user);

        useraxios(this.user)
          .then((res) => {
            console.log(res);
            console.log(this.user);
            if (res.data.message == "登录成功") {
              console.log(123);
              console.log(res.data.data);
              localStorage.setItem(
                "heima_token",
                JSON.stringify(res.data.data)
              );
              this.$router.push({ path: `/pesonal/${res.data.data.user.id}` });
              // this.$router.push({
              //   path: "/pesonal",
              //   query: { plan: "private" },
              // });

              this.$toast("登录成功");
            } else {
              console.log(123);
            }
          })
          .catch((err) => {
            console.log(err);
            console.log(235);
          });
      }
    },
    handleInput(data) {
      // console.log(data);
      this.username = data;
      // console.log(this.username);
    },
  },
};
</script>
<style lang='less' scoped>
.container {
  padding: 20px;

  .close {
    span {
      font-size: 27 / 360 * 100vw;
    }
  }
  .logo {
    display: flex;
    justify-content: center;

    span {
      display: block;
      font-size: 126 / 360 * 100vw;
      color: #d81e06;
    }
  }
  .inputs {
    input {
      margin-bottom: 20px;
    }
  }
  .tips {
    text-align: right;
    margin-bottom: 20px;
    a {
      color: #3385ff;
    }
  }
}
</style>

